<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap core CSS -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet">
        <!--jQuery & BootStrap-->
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#query_button").click(function() {
                    var name = $("#input_name_text").val();
                    var pig_info = {
                        "name": name
                    };
                    $.post("process_query_pig_history", pig_info, function (data, status) {
                        function getRows() {
                            var rows = [];
                            $.each(data, function(index, transaction) {
                                console.log(transaction);
                                rows.push({
                                    index: index,
                                    txn_id: transaction.TxId,
                                    date: transaction.Timestamp,
                                    color: transaction.Value.color,
                                    size: transaction.Value.size,
                                    owner: transaction.Value.owner,
                                    quanrantined: transaction.Value.quanrantined
                                });
                            });
                            return rows;
                        };

                        $('#panel_header').html("<b>" + name + "</b>");
                        $('#table').bootstrapTable('load', getRows());
                    });
                });
            });
        </script>
    </head>

    <body>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="register_pig.html">Register Pig</a></li>
                <li><a href="quarantine_pig.html">Quarantine Pig</a></li>
                <li><a href="transfer_pig_to_slaughter_house.html">Transfer Pig To Slaughter House</a></li>
                <li><a href="query_pig_history.html">Query Pig History</a></li>
                <li><a href="query_owner_all_pigs.html">Query Owner All Pigs</a></li>
                <li><a href="delete_pig.html">Delete Pig</a></li>
            </ul>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-addon" id="input_name_addon">Name</span>
                        <input type="text" class="form-control" id="input_name_text" placeholder="Piggy">
                    </div><!-- /input-group -->
                </div>
                <div class="col-md-1">
                    <button id="query_button" class="btn btn-primary" type="button">Query</button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div id="panel_header" class="panel-heading"></div>
                        <!-- Table -->
                        <table id="table" data-toggle="table" data-toolbar="#toolbar" data-height="460">
                            <thead>
                                <tr>
                                    <th data-field="index">ID</th>
                                    <th data-field="txn_id">Transaction Id</th>
                                    <th data-field="date">Date</th>
                                    <th data-field="color">Color</th>
                                    <th data-field="size">Size</th>
                                    <th data-field="owner">Owner</th>
                                    <th data-field="quanrantined">Quanrantined</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div><!-- /container -->
    </body>
</html>